.loading-cover {
  position        : relative;
  width           : 300px;
  height          : 6px;
  border-radius   : 3px;
  background-color: #fff;
  box-shadow      : 0 1px 4px #40a9ff;
  border          : 1px solid #fff;
  overflow        : hidden;
  animation       : load-appear 1s ease 1s both,
    change-status 1s cubic-bezier(.49,.01,.59,1.23) 7.5s both;
}

.loading-cover>.loading-item {
  position        : absolute;
  left            : 0;
  top             : 0;
  height          : 100%;
  width           : 0;
  background-color: #40a9ff;
  border-radius   : 3px;
  animation       : load-anime 5s ease 2s both;
}

.loading-cover>.title {
  opacity    : 0;
  color      : #fff;
  font-size  : 12px;
  text-align : center;
  line-height: 30px;
  animation  : title-appear 0.5s ease 7.5s both;
  user-select: none;
}

@keyframes load-appear {
  from {
    transform: scaleX(0);
  }
}

@keyframes disappear {
  to {
    opacity: 0;
  }
}

@keyframes change-status {
  to {
    width : 80px;
    height: 30px;
  }
}

@keyframes load-anime {

  70%,
  90% {
    width                    : 80%;
    animation-timing-function: ease-in;

  }

  100% {
    width: 100%;
  }
}

@keyframes title-appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}